<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下载线性统计表</title>
	<link href="${basePath}/admin/css/base.css" type="text/css" rel="stylesheet">
   	<link rel="stylesheet" type="text/css" href="${basePath}/css/jquery.datetimepicker.css"/>
   	<script src="${basePath}/js/jquery.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8" src="${basePath}/js/jquery.datetimepicker.js"></script>
   	<script src="${basePath}/js/highcharts.js" type="text/javascript"></script>
   	<script src="${basePath}/js/data.js" type="text/javascript"></script>
   	<script src="${basePath}/js/exporting.js" type="text/javascript"></script>
   
</head>
	<script type="text/javascript">  
var chart;  
$(document).ready(function() {  
    chart = new Highcharts.Chart({  
        chart: {  
            renderTo: 'linearChart',//设置显示图表的容器  
            type: 'line',//设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column  
            marginRight: 200,//右边间距  
            marginBottom: 25//底部间距/空隙  
        },  
        credits:{//右下角的文本  
            enabled: true,  
            position: {//位置设置  
                align: 'right',  
                x: -10,  
                y: -10  
            },  
            href: "javascript:;",//点击文本时的链接  
            style: {  
                color:'blue'  
            },  
            text: "CP厂商游戏下载与收入统计"//显示的内容  
        },  
        title: {  
            text: '${message!}',//标题  
            x: -20 //center设置标题的位置  
        },  
        subtitle: {  
            text: '${error!}',//副标题  
            x: -20//副标题位置  
        },  
        yAxis: {  
            title: {//纵轴标题  
                text: '下载量'  
            },  
            labels : {  
                formatter : function() {//设置纵坐标值的样式  
                 return this.value;  
                }  
               },   
            plotLines: [{  
                value: 0,  
                width: 1,  
                color: '#808080'  
            }],
            categories: [0] 
        },  
        tooltip: {//鼠标移到图形上时显示的提示框  
            formatter: function() {  
                    return '<b>'+ this.series.name +'</b><br/>'+  
                    this.x +': '+ this.y +'次';  
            }  
        },  
        legend: {//方框所在的位置(不知道怎么表达)  
            layout: 'vertical',  
            align: 'right',  
            verticalAlign: 'top',  
            x: -10,  
            y: 100,  
            borderWidth: 0  
        }, 
        xAxis: {//横轴的数据  
            categories: ${xAxis!} 
        },  
        series: [{//以下为纵轴数据  
            name: 'apk下载量',  
            data: ${apk_series!}  
        },
        {//以下为纵轴数据  
            name: 'ios下载量',  
            data: ${ios_series!}  
        }]  
    });  
});  
</script>  
</head>  
<body>  
<div id="container" style="background:#f2ffe3 url(${basePath}/admin/images/main_00.jpg) left top repeat-x;">
	<h3 style="height:30px;">
		检索条件
	</h3>
	<form name="queryForm" action="${basePath}/admin/downincome/down" method="POST" onsubmit="return checkForm();">
		<select name="year" class="select_103">
			<option value="-1">-请选择年份-</option>
			<option value="2014" selected="selected">2014</option>
		</select>年
		<input type="text" id="month" name="month" value="" size=5 readonly="readonly"/>月
		<input type="text" id="day" name="day" value="" size="7" readonly="readonly"/>日
			
			<br/>
		类型：<select name="type" class="select_103">
			<option value="1">下载量</option>
			<option value="2">收入</option>
			</select>
		<#if isAdmin??>
			CP：
				<select name="cp" id="cpSelect" class="select_303">
					<option value="-1">-选择CP-</option>
					<#list cps as cp>
						<option value="${cp.id!}">${cp.nickname!}</option>
					</#list>
				</select>
			产品：
				<select name="game_id" id="product" class="select_203">
					<option value="-1">-选择产品-</option>
				</select>
		<#else>
			产品：
				<select name="game_id" id="product" class="select_203">
					<option value="-1">-选择产品-</option>
					<#list products as p>
						<option value="${p.id!}">${p.name!}</option>
					</#list>
				</select>
		</#if>
			
			<input type="submit" class="button_50" value="检索"/>
	</form>
</div>
<div id="linearChart" ></div>  
<script type="text/javascript">
	$('#month').datetimepicker({
		timepicker:false,
		lang:'ch',
		format:'m'
	});
	$('#day').datetimepicker({
		timepicker:false,
		lang:'ch',
		format:'d'
	});
	$("#cpSelect").bind("change",function(){
		$(".tempPros").remove();
		var admin_id = document.queryForm.cp.value;
		$.ajax({
			url:"${basePath}/admin/ajax/getGames",
			data:{"admin_id":admin_id},
			method:"post",
			datatype:"json",
			success:function(data){
				var select = "";
				for ( var num in data) {
					select += "<option class='tempPros' value='" + data[num].id + "'>";
  					select += data[num].name;
  					select += "</option>";
				}
				$("#product").html(select);
			}
		});
		
	});
	
	function checkForm(){
		var year = document.queryForm.year.value;
		var month = document.queryForm.month.value;
		var day = document.queryForm.day.value;
		var game_id = document.queryForm.game_id.value;
		if(month != "" && (month<1 || month > 12)){ alert("输入的月份无效！"); return false;}
		if(day != "" && day < 1 || day > 31){ alert("输入的日期无效！"); return false;}
		if(year == -1){ alert("年份未选择,时间段未确定,还不能为您检索"); return false;}
		if(year != -1 && month===""&&day!=""){ alert("时间段未确定,还不能为您检索"); return false;}
		if(game_id == -1){ alert("产品未选择,还不能为您检索"); return false;}
	}
</script>
</body>
</html>